import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styles from './style.module.scss';
import { actionCreators } from './store';
import { dateRegExp } from '../../config/utils'
// import { NEWMODULEBATCHID } from '../../config/env'
import { Link } from 'react-router-dom';
import PlanCard  from '../../components/planCard';
import { upLoadFileToOSS } from '../../config/utils';

class DengesCourse extends PureComponent {
    render() {
		const { courseData, uploadCourseImg } = this.props;
		return (
			<div className={styles['dengesCourse']}>
				<input type="file"
					onChange = {
						(e) => uploadCourseImg(e)
					}   
				/> 
				<div className={styles['dengesBanner']}>
					<div className={styles['dengesFence']}>
                		<div className={styles['mineCourse']}>我的课程</div>
                		<div className={styles['courseCenter']} onClick = {
							() => this.props.history.push({
								pathname: '/courseReferral/2'
							})
						}>课程中心</div>
            		</div>
            		<div className={styles['dengesFence']}>
                		<div className={styles['courseTitle']}>{courseData.title}</div>
                		<div className={styles['courseMessage']}>
							<div className={styles['courseStatus']}>{courseData.status === 0? '未开始': (courseData.status === 1)? '正在进行': '已结束'}</div>
                    		<div className={styles['coursePeriod']}>{courseData.day}课时</div>
                		</div>
            		</div>
				</div>

				<div className={styles['dengesMatter']}>
					<div className={styles['dengesFiche']}>
						{
							(()=> {
								switch (courseData.status) {
									case 0:
										return (
											<div className={styles['courseDNS']}>
												<div className={styles['countZeroTitle']}>开课倒计时</div>
												<div className={styles['countZeroDay']}>
													<div>{courseData.countdownDay}</div>
													<div>天</div>
												</div>
												<div className={styles['courseStartDay']}>开课时间{dateRegExp(courseData.stratTime, 'MM月dd日')}</div>
												<div className={styles['countZeroButton']}>
													<div onClick = {
														() => this.props.history.push({
															pathname: '/tutionProcess'
														})
													}>开课流程</div>
													<div onClick = {
														// 隐式传参
														() => this.props.history.push({
															pathname: '/personalTeacher',
															state: {
																id: 3,
																name: '小悦',
																sex: '女'
															}
														})
													}>我的老师</div>
												</div>
											</div>
										)
									case 1:
										if (courseData.list.denges_Falg === '1') {
											return (
												<div className={styles['courseAdsum']}>
													{/* 课程卡片组件位置 */}
													<PlanCard plan={courseData.list}/>
												</div>
											)
										} else {
											return (
												<div className={styles['courseNone']}>
													<img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fdefault%402x.png" alt="" />
												</div>
											)
										}
										
									case 2:
										return (
											<div className={styles['courseOver']}>
												<div className={styles['overLeft']}></div>
												<div className={styles['overRight']}>
													<div>悦器社{courseData.day}天吉他训练营</div>
													<div>课程已结束</div>
													<div>恭喜你打开了音乐世界的大门</div>
												</div>
											</div>
										)
									default:
										return null
									
								}
							})()
						}
					</div>	
				</div>
				{
					(()=> {
						if ( courseData.stratTime > 1541433600000 ) {
							return (
								<Link to={'/volitionPlan'}>
									<div className={styles['volitionplan']}>
										<div className={styles['volitionGuide']}>
											<img src={courseData.willBanner} alt="" />
										</div> 
									</div>
								</Link>
							)
						} else {
							return null
						}
					})()
				}	
			</div> 
		)
	}

    componentDidMount() {
		// 获取 今日课程 数据
		this.props.acquireDengesCourseData();
	}
}

const mapState = (state) => ({
	courseData: state.dengesCourse? state.dengesCourse.courseData: []
});

const mapDispatch = (dispatch) => ({
	acquireDengesCourseData() {
		const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const batch_id = '20190211045'
		const student_id = '20190211045001'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
		dispatch(actionCreators.acquireDengesCourseData( open_id, batch_id, student_id, union_id ));
	},
	uploadCourseImg(event) {
		console.log(event, '............')
		// 浏览器兼容 (FF不兼容event.srcElement)
		let evt = event.srcElement ? event.srcElement : event.target;
		let file = evt.files; // 获取要上传的文件
        for (let i = 0; i < file.length; i++) {
          // 上传多媒体
          upLoadFileToOSS(file[i], 'edu')

        }
	}
});

export default connect(mapState, mapDispatch)(withRouter(DengesCourse));
